逐浪CLI Studio技术站

vuePress-theme-reco 逐浪CMS发哥    2020 - 2021
逐浪CLI Studio技术站 逐浪CLI Studio技术站

Choose mode

  • dark
  • auto
  • light
首页
导览
  • vue
  • 证书
  • bootstrap
  • css
  • 开发
  • 微软技术
  • windows
  • C#
  • cms
  • 安全
  • 数据库
  • 网络
Bootstrap-Vue
视频
时间线
Bootstrap中国站
下载逐浪CMS
Contact
  • NPM
  • GitHub
  • 73ic工具站
  • 在线Markdown
  • Vs code技巧
  • zico图标
  • 逐浪字库
  • UNI国际字码表
  • 关于逐浪
  • 企业歌曲
author-avatar

逐浪CMS发哥

34

文章

94

标签

首页
导览
  • vue
  • 证书
  • bootstrap
  • css
  • 开发
  • 微软技术
  • windows
  • C#
  • cms
  • 安全
  • 数据库
  • 网络
Bootstrap-Vue
视频
时间线
Bootstrap中国站
下载逐浪CMS
Contact
  • NPM
  • GitHub
  • 73ic工具站
  • 在线Markdown
  • Vs code技巧
  • zico图标
  • 逐浪字库
  • UNI国际字码表
  • 关于逐浪
  • 企业歌曲
  • blog

    • VUE如何关闭Eslint 允许宽松调试的方法
    • Vue中文本输出的三种方法{{}}、v-html、v-text
    • pfx证书转jks证书方法
    • script标签引入vue方式开发如何写组件
    • vue cli 4定义站点发布在子目录下的两则
    • vue cli4中定义每个页面的title以及Keywords的方法
    • vue cli4中引用bootstrap框架的两种方法
    • vue cli开发中:SASS和SCSS标签详解与scoped局部和全局的使用
    • vue-cli4注册全局组件
    • vue开发配置扫盲帖:什么是CSS Modules以及为什么引入CSS Modules?
    • 基于VuePress构建高基于markdown语法的网站全教程
    • 快速创建vuepress项目-使用vuepress+Markdown写文档并发布为网站
    • 精准调试-vue调试工具vue-devtools安装及完整使用教程
    • 解决vue路由跳转页面不刷新(页面变量加载不自动刷新)问题的两种方法

Vue中文本输出的三种方法{{}}、v-html、v-text

vuePress-theme-reco 逐浪CMS发哥    2020 - 2021

Vue中文本输出的三种方法{{}}、v-html、v-text


逐浪CMS发哥 2020-04-16 vue 文本 输出

#

使用{{}}将元素当成纯文本输出,如: 实现将Title字段的数据输出

# v-html

v-html会将元素当成HTML标签解析后输出

# v-text

v-text会将元素当成纯文本输出

代码:

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>Vue文本渲染三种方法</title>
</head>
<body>
    <div id="app">
         <!--   {}}/v-text不能解析html元素,只会照样输出 -->
         <p>{{hello}}</p>
        <p v-text = 'hello'></p>
        <p v-html = 'hello'></p>
    </div>
</body>
<script src="vue.js"></script>
<script>
    new Vue({
        el:'#app',
        data:{
            hello:'<span>hello world</span>'
        }
    })
</script>
</html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24

运行结果: 三种输出结果展示